<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>人才招聘系统-注册</title>
    <link rel="stylesheet" th:href="@{/styles/m_css.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/styles/tips.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}" type="text/css"/>
    <script th:src="@{/js/layui/layui.js}"></script>
    <script th:src="@{/js/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/js/http.js}"></script>
</head>
<body>
<div class="user_header" th:insert="~{/commons/resume_header}"></div>
<div class="clear"></div>
<!--弹出框-->
<!--职位类别start-->
<div class="sPopupDiv none" id="jobdiv" style="float:left;"></div>
<!--职位类别end-->
<!--工作地点start-->
<div class="sPopupDiv none" id="citydiv"></div>
<!--工作地点end-->
<!--行业类别start-->
<div class="sPopupDiv none" id="industrydiv"></div>
<!--行业类别end-->

<form action="" id="resumeForm" name="MyForm" method="post" target="expectiframe"
      autocomplete="off" class="layui-form">
    <div class="news_expect_body">
        <div class="news_expect">
            <div class="news_expect_cont_h1">
                <div class="news_expect_cont_h1_box">
                    <span class="news_expect_cont_h1_s">您正在创建简历</span>
                    <div class="news_expect_cont_h1_p">简历是求职第一步，优质的简历才能更快找到满意工作！</div>
                </div>
                <div class="fill_in_process" style="width:710px;">
                    <span><i>1</i>求职意向<em>……</em></span>
                    <span id="worktype"><i>2</i>工作经历<em>……</em></span>
                    <span class="fill_add_color" id="edutype"><i>3</i>教育经历<em>……</em></span>
                    <span><i class="fill_add_color_cg"></i>填写成功</span>
                </div>
            </div>
            <!--教育经历start-->
            <div class="news_expect_content" id="edu"></div>
            <div class="news_expect_tit">
                <span class="news_expect_tit_s"><i class="news_expect_tit_yx_icon"></i>毕业院校</span>
            </div>
            <div id="addedu">
                <div class="news_expect_n_box" name="news_expect_n_box">
                    <div class="news_expect_list">
                        <span class="news_expect_list_span"><i class="news_expectfont">*</i>学校名称：</span>
                        <div class="news_expect_list_rbox">
                            <input type="text" value="" name="eduname[]" id="eduname" class="news_expect_text_t1"
                                   placeholder="请填写学校名称"/>
                            <span class="news_expect_name"></span>
                            <div class="resume_tip"><span class="none" id="hideduname"></span></div>
                        </div>
                    </div>

                    <div class="news_expect_list news_expect_w1000">
                        <span class="news_expect_list_span"><i class="news_expectfont">*</i>在校时间：</span>
                        <div class="news_expect_list_rbox">
                            <input name="edusdate[]" id="edusdate" type="text"
                                   value="" placeholder="请选择入校时间" class="news_expectadd_text"/>
                            <span class="news_expect_text_xzline">-</span>
                            <input name="eduedate[]" id="eduedate" type="text"
                                   value="" placeholder="请选择毕业时间" class="news_expectadd_text"/>
                            <span class="news_expect_name"></span>
                            <div class="resume_tip resume_tipw160"><span class="none" id="hidedusdate"></span></div>
                        </div>
                    </div>
                    <script>
                        layui.use(['laydate'], function () {
                            var laydate = layui.laydate;
                            monthclick(laydate, '#edusdate');
                            monthclick(laydate, '#eduedate');
                        });
                    </script>
                    <div class="news_expect_list news_expect_w1000">
                        <span class="news_expect_list_span"><i class="news_expectfont">*</i>最高学历：</span>
                        <div class="news_expect_text_big">
                            <div class="news_expect_list_rbox">
                                    <input type="text" value="" name="education[]" id="education" class="news_expect_text_t1"
                                   placeholder="请填写最高学历"/>
                            </div>
                            <div class="resume_tip"><span class="none" id="hideducation"></span></div>
                        </div>
                    </div>
                    <div class="news_expect_list news_expect_w1000">
                        <span class="news_expect_list_span">所学专业：</span>
                        <div class="news_expect_list_rbox">
                            <input type="text" value="" name="eduspec[]" id="eduspec" class="news_expect_text_t1"
                                   placeholder="请填写所学专业"/>
                            <span class="news_expect_name"></span>
                            <div class="resume_tip"><span class="none" id="hideduspec"></span></div>
                        </div>
                    </div>

                    <div class="wsexpect_tip"> 企业需要了解您的教育经历，请认真填写！您可添加多个教育经历~
                        <div class="wsexpect_tip_bth"><a href="javascript:;" onclick="clickAddEduBg();"
                                                         class="wsexpect_tip_tj">+ 添加教育经历</a></div>
                    </div>
                </div>
            </div>
            <div class="news_expect_fotbox">
                <div class="news_expect_nbth">

                    <input type="button" class="news_expect_list_sub" value="保存" id="savebtn" name="submit">
                    <input type="button" class="layui-btn layui-btn-primary" id="prebtn" value="返回上一步" name="submit"
                           style="margin-left:20px">
                </div>
            </div>
        </div>
    </div>
</form>
<div class="clear"></div>
<div class=foot th:insert="~{commons/resume_footer}">
</div>

<script>
    // layui.use(['layer', 'form', 'laydate'], function () {
    // })

    const fieldMappings = {
        'eduname[]' : 'school',
        'edusdate[]' : 'startDate',
        'eduedate[]' : 'graduateDate',
        'eduspec[]' : 'major',
        'education[]' : 'highestDegree'
    }

    let formData = {}
    let eduBgs = []
    let sort = null;
    //计算当前日期和三个月后的日期
    let minDate = new Date();
    minDate.setFullYear(new Date().getFullYear() - 30);
    minDate = minDate.toISOString().split('T')[0];
    let maxDate = new Date().toISOString().split('T')[0];

    $(function () {

        initDatePicker(null, null, minDate, maxDate, "2000-01-01", new Date());

        formData = JSON.parse(localStorage.getItem("formData") || '{}');
        let eduBgs = "eduBgs" in formData ? formData.eduBgs : [];
        formData.eduBgs=eduBgs
        if(eduBgs.length > 0){
            const $firstForm = $(".news_expect_n_box").first();
            Object.entries(fieldMappings).forEach(([fieldName, dataKey]) => {
                const value = eduBgs[0][dataKey];
                if (value !== undefined) {
                    $firstForm.find(`[name="${fieldName}"]`).val(value);
                }
            });
            eduBgs.filter(item => item.sort !==0)
                .forEach(item => {
                    addEdu(item)
                })
        }
        $("#savebtn").click(async () => {
            storeEduBgs()
            let res = await new Promise(resolve => {
                httpJsonRequest('/resume/createResume','POST',formData,localStorage.getItem("token"),'application/json',resolve)
            })
            localStorage.removeItem("formData")
            location.href = "./resumesuc"
        })
        $("#prebtn").click(() => {
            location.href = "./resume2"
        })
    })
    function storeEduBgs(){
            let newSort = 0;
            eduBgs = [];
            $("div[name='news_expect_n_box']").each(function(){
                let $form = $(this)
                let eduBgItem = {}
                $form.find('input,select,textarea').each(function () {
                    let $el = $(this)
                    let originalName = $el.attr('name')
                    if (originalName in fieldMappings) {
                        eduBgItem[fieldMappings[originalName]] = $el.val()
                    }
                })
                eduBgItem.sort = newSort++
                eduBgs.push(eduBgItem)
            })
            localStorage.setItem("formData", JSON.stringify({
                ...formData,
                eduBgs : eduBgs
            }))
    }
     //laydate只能在同一个脚本文件里调用
      function clickAddEduBg() {
        appendEduDiv();
        storeEduBgs();
        location.reload();
      }

    function appendEduDiv(eduBgItem = null){
        $("#addedu").append(function(){
            var html="";
            const timeStamp = Date.now();
            var  getValue = (fieldName) => eduBgItem ? eduBgItem[fieldName] : '';
            sort = sort ? sort=sort+1 : (eduBgItem ? eduBgItem.sort : 1);

            html+=`<div id='${sort}${timeStamp}' class='news_expect_n_box' name='news_expect_n_box'><div class='news_expect_list'><span class='news_expect_list_span'><i class='news_expectfont'>*</i>学校名称：</span><div class='news_expect_list_rbox'><input type='text' value='${getValue(fieldMappings['eduname[]'])}' name='eduname[]' id='eduname${sort}' class='news_expect_text_t1' onBlur=\"checkonblur('eduname${sort}','rand');\" placeholder='请填写学校名称'/><span class='news_expect_name'></span><div class='resume_tip'><span class='none' id='hideduname${sort}'></span></div></div><i class='yun_resume_popup_del showedunum news_expect_listqx' id='${sort}' onclick=\"deletebox('${sort}','${timeStamp}')\">删除</i></div>`;
            html+=`<div class='news_expect_list news_expect_w1000'><span class='news_expect_list_span'><i class='news_expectfont'>*</i>在校时间：</span><div class='news_expect_list_rbox'><input name='edusdate[]' id='edusdate${sort}${timeStamp}' type='text' value='${getValue(fieldMappings['edusdate[]'])}' onfocus=\"showblurmsg('edusdate${sort}',1,'')\" class='news_expectadd_text'placeholder='请选择入校时间' /><span class='news_expect_text_xzline'>-</span><input class='news_expectadd_text' name='eduedate[]' id='eduedate${sort}${timeStamp}'  type='text' value='${getValue(fieldMappings['eduedate[]'])}'  onfocus=\"showblurmsg('eduedate${sort}',1,'')\" placeholder='请选择毕业时间'  /><span class='news_expect_name'></span><div class='resume_tip resume_tipw160'><span class='none' id='hidedusdate${sort}'></span></div></div></div>`;
            html+=`<script>
            layui.use(['laydate'], function(){
                var laydate = layui.laydate;
                monthclick(laydate,'#edusdate${sort}');
                monthclick(laydate,'#eduedate${sort}');
            })
            <\/script>`;
            html+=`<div class='news_expect_list'><span class='news_expect_list_span'><i class='news_expectfont'>*</i>最高学历：</span><div class='news_expect_text_big'><div class="news_expect_list_rbox"><input type="text" value="${getValue(fieldMappings['education[]'])}" name="education[]" id="education" class="news_expect_text_t1" placeholder="请填写最高学历"/></div><div class='resume_tip'><span class='none' id='hideducation${sort}'></span></div></div></div>`;
            html+=`<div class='news_expect_list news_expect_w1000'><span class='news_expect_list_span'>所学专业：</span><div class='news_expect_list_rbox'><input type='text' value='${getValue(fieldMappings['eduspec[]'])}' name='eduspec[]' id='eduspec${sort}' class='news_expect_text_t1' onBlur=\"checkonblur('eduspec${sort}','rand');\" placeholder='请填写所学专业'/><span class='news_expect_name'></span><div class='resume_tip'><span class='none' id='hideduspec${sort}'></span></div></div>	</div></div>`;
           
            initDatePicker(
            timeStamp,
            sort.toString(),
            minDate,
            maxDate,
            getValue(fieldMappings["edusdate[]"]),
            getValue(fieldMappings["eduedate[]"])
          );

            return html;
        });

    }
    function addEdu(eduBgItem = null) {
        appendEduDiv(eduBgItem);
      }

    function deletebox(id,timeStamp){
        formData = JSON.parse(localStorage.getItem("formData") || '{}');
        formData.eduBgs = formData.eduBgs
       .filter((item) => item.id !== id)
       .map((item) => {
            if (item.sort > id) {
                item.sort = item.sort - 1; // sort值减1
            }
            return item;
        });
        sort--
        localStorage.setItem("formData", JSON.stringify(formData))
        $("#" + id + timeStamp).remove();
    }

    function initDatePicker(
        timeStamp,
        elemId,
        minDateValue,
        maxDateValue,
        value1,
        value2
      ) {
        let index1 = elemId ? elemId : "";
        let index2 = timeStamp ? timeStamp : "";
        value1 = value1 ? value1 : "2000-01-01";
        value2 = value2 ? value2 : new Date();
        layui.use(["laydate"], function () {
          laydate = layui.laydate;
          laydate.render({
            elem: "#edusdate" + index1 + index2,
            min: minDateValue,
            max: maxDateValue,
            type: "date",
            value: value1,
          });
          laydate.render({
            elem: "#eduedate" + index1 + index2,
            min: minDateValue,
            max: maxDateValue,
            type: "date",
            value: value2,
          });
        });
      }
</script>
</body>
</html>